{% extends "basic.html" %} {%block body%}

<style>
    div.tooltip {
        position: absolute;
        text-align: left;
        width: 120px;
        height: 30px;
        padding: 2px;
        font: 12px sans-serif;
        background: lightsteelblue;
        border: 0px;
        border-radius: 8px;
        pointer-events: none;
    }
</style>

<div id="page-wrapper">

    <div class="container-fluid">

        <!-- Page Heading -->
        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header">
                    Charts
                </h1>
                <ol class="breadcrumb">
                    <li>
                        <i class="fa fa-dashboard"></i> <a href="index.html">Dashboard</a>
                    </li>
                    <li class="active">
                        <i class="fa fa-bar-chart-o"></i> Charts
                    </li>
                </ol>
            </div>
        </div>
        <!-- /.row -->

        <!-- Flot Charts -->
        <!--<div class="row">
            <div class="col-lg-12">
                <h2 class="page-header">Flot Charts</h2>
                <p class="lead">Flot is a pure JavaScript plotting library for jQuery, with a focus on simple usage, attractive looks and interactive features. For full usage instructions and documentation for Flot Charts, visit <a href="http://www.flotcharts.org/">http://www.flotcharts.org/</a>.</p>
            </div>
        </div>-->
        <!-- /.row -->

        <!--filter form-->
        <div class="row">
            <div class="col-lg-8">
                <form id="convFilter" class="form-horizontal" method="post" action="/filter_chart3">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="keywords">LinkRef</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="LinkRef" id="LinkRef" placeholder="e.g. AL100">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="dialogAct">DataQuality</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="DataQuality" id="DataQuality" placeholder="e.g. 1">
                            </div>
                        </div>
                        <!--<div class="form-group">
                            <label class="col-sm-4 control-label" for="slot">AverageSpeed</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="AverageSpeed" id="AverageSpeed" placeholder="e.g. >127.5">
                            </div>
                        </div>-->
                    </div>
                    <div class="col-md-6">
                        <div class="form-group ">
                            <label class="col-sm-4 control-label" for="fromDate">From</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="fromDate" id="fromDate" placeholder="e.g. 01/25/15">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="toDate">To</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="toDate" id="toDate" placeholder="e.g. 02/25/15">
                            </div>
                        </div>
                        <div class="col-sm-offset-4 col-sm-8">
                            <!--<button type="button" id="find-all" class="btn btn-primary">Find All</button>-->
                            <button type="submit" class="btn btn-primary">Search</button>
                        </div>
                    </div>

                </form>
            </div>
        </div>
        <!--end filter form-->

        <div class="row">
            <div class="col-lg-12">
                <div class="panel panel-red">
                    <div class="panel-heading">
                        <h3 class="panel-title"><i class="fa fa-bar-chart-o"></i> Scatter plot chart</h3>
                    </div>
                    <div class="panel-body">
                        <div id="scatter-plot-chart" class="col-xs-12">
                            <!--<svg width="960" height="500"></svg>-->
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <!-- /.container-fluid -->

</div>

<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
    var filter = {{filter|tojson}};
    filter = JSON.parse(filter);
    var margin = {
        top: 20,
        right: 20,
        bottom: 30,
        left: 40
    };
    width = 960 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;

    var tooltip = d3.select("body").append("div")
        .attr("class", "tooltip")
        .style("opacity", 0);

    var x = d3.scaleLinear()
        .range([0, width])
        .nice();

    var y = d3.scaleLinear()
        .range([height, 0]);

    var xAxis = d3.axisBottom(x).ticks(12),
        yAxis = d3.axisLeft(y).ticks(12 * height / width);

    var brush = d3.brush().extent([
            [0, 0],
            [width, height]
        ]).on("end", brushended),
        idleTimeout,
        idleDelay = 350;

    var svg = d3.select("#scatter-plot-chart").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    var clip = svg.append("defs").append("svg:clipPath")
        .attr("id", "clip")
        .append("svg:rect")
        .attr("width", width)
        .attr("height", height)
        .attr("x", 0)
        .attr("y", 0);

    var scatter = svg.append("g")
        .attr("id", "scatterplot")
        .attr("clip-path", "url(#clip)");

    var data1 = null;

    d3.csv("./static/MAR15.csv", function(error, data) {
        if (error) throw error;
        data.forEach(function(d) {
            d.Flow = +d.Flow;
            d.AverageJT = +d.AverageJT;
        });
        if (filter['LinkRef']) {
            data = data.filter(function(row) {
                return row['LinkRef'] == filter['LinkRef'];
            })
        };

        if (filter['DataQuality']) {
            data = data.filter(function(row) {
                return row['DataQuality'] == filter['DataQuality'];
            })
        };

        if (filter['toDate']) {
            data = data.filter(function(row) {
                return row['Date'] < filter['toDate'];
            })
        };

        if (filter['fromDate']) {
            data = data.filter(function(row) {
                return row['Date'] > filter['fromDate'];
            })
        };

        data1 = data;

        var xExtent = d3.extent(data, function(d) {
            return d.Flow;
        });
        var yExtent = d3.extent(data, function(d) {
            return d.AverageJT;
        });

        x.domain(d3.extent(data, function(d) {
            return d.Flow;
        })).nice();
        y.domain(d3.extent(data, function(d) {
            return d.AverageJT;
        })).nice();


        scatter.selectAll(".dot")
            .data(data)
            .enter().append("circle")
            .attr("class", "dot")
            .attr("r", 4)
            .attr("cx", function(d) {
                return x(d.Flow);
            })
            .attr("cy", function(d) {
                return y(d.AverageJT);
            })
            .attr("opacity", 0.5)
            .on("mouseover", function(d) {
                tooltip.transition()
                    .duration(200)
                    .style("opacity", .9);
                tooltip.html("Flow:" + d.Flow + "<br/>" + "AverageJT:" + d.AverageJT)
                    .style("left", (d3.event.pageX) + "px")
                    .style("top", (d3.event.pageY - 30) + "px");
            })
            .on("mouseout", function(d) {
                tooltip.transition()
                    .duration(500)
                    .style("opacity", 0);
            })
            .style("fill", function(d){
                if(d.LinkRef == "AL1000"){
                    return "#4292c6";
                }
                else if(d.LinkRef == "AL100"){
                    return "#E11D1D"
                }
                
            });

    });

    // x axis
    svg.append("g")
        .attr("class", "x axis")
        .attr('id', "axis--x")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

    svg.append("text")
        .style("text-anchor", "end")
        .attr("x", width)
        .attr("y", height - 8)
        .text("Flow");

    // y axis
    svg.append("g")
        .attr("class", "y axis")
        .attr('id', "axis--y")
        .call(yAxis);

    svg.append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", "1em")
        .style("text-anchor", "end")
        .text("AverageJT");

    scatter.append("g")
        .attr("class", "brush")
        .call(brush);


    function brushended() {

        var s = d3.event.selection;
        if (!s) {
            if (!idleTimeout) return idleTimeout = setTimeout(idled, idleDelay);
            x.domain(d3.extent(data1, function(d) {
                return d.Flow;
            })).nice();
            y.domain(d3.extent(data1, function(d) {
                return d.AverageJT;
            })).nice();
        } else {

            x.domain([s[0][0], s[1][0]].map(x.invert, x));
            y.domain([s[1][1], s[0][1]].map(y.invert, y));
            scatter.select(".brush").call(brush.move, null);
        }
        zoom();
    }

    function idled() {
        idleTimeout = null;
    }

    function zoom() {
        var t = scatter.transition().duration(750);
        svg.select("#axis--x").transition(t).call(xAxis);
        svg.select("#axis--y").transition(t).call(yAxis);
        scatter.selectAll("circle").transition(t)
            .attr("cx", function(d) {
                return x(d.Flow);
            })
            .attr("cy", function(d) {
                return y(d.AverageJT);
            });
    }
</script>


{%endblock%}